<template>
    <!--服务管理-->
    <div class="doctorservermanage">
        <h2 class="tit" v-if="!editFlag">已开通的服务</h2>
        <h2 class="tit" v-if="editFlag">服务选择</h2>
        <div class="addManag">
            <h4 class="tt">
                <Button class="edit-btn" type="primary" v-if="!editFlag" @click="editFlag = true">
                    <i class = "iconfont icon-bianji" style="font-size:14px;margin-right:5px"></i>编辑
                </Button>
                <Button class="edit-btn" v-if="editFlag" @click="editFlag = false">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>
            </h4>
            <div v-if="clildCount == 0 && !editFlag"><p style="color:#ff9966;text-align: center;margin-bottom: 40px;">此用户暂未开通服务，如需开通，请点编辑按钮选择需要开通的服务</p></div>
            <div class="fuwu" v-else>
                <!-- 医生服务-->
                <div class="xsfw" v-for="(item,index) of allServerList" :key='index'>
                    <!--第一行-->
                    <div class="select_wufu" ref="all">
                        <template v-if="editFlag">
                            <div v-for="(items,index) in item.clildList" :key='index'>
                                <Checkbox v-model="items.flag">{{ items.menuName }}</Checkbox>
                            </div>
                        </template>
                        <template v-else-if="!editFlag">
                            <div v-if="items.selected == 1" v-for="(items,index) in item.clildList" :key='index'>
                                <label :for="'a' + items.id">{{ items.menuName }}</label>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <!--保存-->
            <div class="expert_save">
                <Button class="btn" type="primary" v-if="editFlag" @click="navto">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button>
                <Button @click="reback">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
                </Button>
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            allServiceList: [],
            docServiceList: [],
            id: null,
            pageNo: null,
            searchKey: "",
            editFlag: false,
            clildCount:0,
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack: 2
        };
    },
    created() {      
        this.pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
        this.searchKey = this.$route.query.searchKey
            ? this.$route.query.searchKey
            : "";
        this.province = this.$route.query.province
            ? parseInt(this.$route.query.province)
            : null;
        this.city = this.$route.query.city
            ? parseInt(this.$route.query.city)
            : null;
        this.area = this.$route.query.area
            ? parseInt(this.$route.query.area)
            : null;
        this.hospital = this.$route.query.hospital
            ? this.$route.query.hospital
            : null;       
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/doctorManagement/index",
                title: "医生端运营"
            },
            {
                path: "/index/configuration/dovtormanage/list",
                title: "医生管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted(){
        this.id = this.$route.query.id;
        let param = {};
        param.doctorId = this.id;
        //获取医生已开通的服务
        this.$axios.post(api.doctorMenu, param).then(resp => {
                this.docServiceList = resp.data.object;
            }).catch(err => {
                console.log(err);
            });
        //获取全部服务
        this.$axios.post(api.doctorMenuList,{}).then(resp => {
                if (resp.data.code == 1) {
                    let tmpData = resp.data.object;
                    this.allServiceList = tmpData;
                    for (let i = 0; i < this.allServiceList.length; i++) {
                        //循环获取child
                        if(this.allServiceList[i].clildList){
                            for (let j = 0; j < this.allServiceList[i].clildList.length; j++) {
                                //循环child对比id
                                let index = this.docServiceList.indexOf(
                                    this.allServiceList[i].clildList[j].id
                                );
                                if (index != -1) {
                                    this.clildCount++;
                                    this.allServiceList[i].clildList[j].selected = 1;
                                    this.allServiceList[i].clildList[j].flag = true
                                } else {
                                    this.allServiceList[i].clildList[j].selected = 0;
                                    this.allServiceList[i].clildList[j].flag = false
                                }
                            }
                        }                      
                    }
                }
            }).catch(err => {
                console.log(err);
            });       
    },
    methods: {
        navto() {
            let arr = [];
            // 循环已操作的数据 找出已经选中数据的ID
            this.allServerList.forEach(item =>{
                if(item.clildList){
                    item.clildList.forEach(i =>{
                        if(Boolean(i.flag)) {
                            arr.push(i.id)
                        }
                    })
                }
            })  
            this.$axios
                .post(api.updatedoctorMenuList, {
                    doctorId: parseInt(this.id),
                    menuIds: arr
                })
                .then(res => {
                    if (res.data.success) {
                        this.$Message.info("修改成功");
                        //   公用方法
                        setTimeout(()=>{
                            this.reback ()
                        }, 500)
                    }
                });
        },
        reback() {
            //   公用方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/configuration/dovtormanage/list",
                {
                    pageNo: this.pageNo,
                    // searchKey: this.searchKey,
                    // province: this.province,
                    // city: this.city,
                    // area: this.area,
                    // hospital: this.hospital,
                    isBack: 2
                }
            );
        }
    },
    computed: {
        allServerList() {
            for (let i = 0; i < this.allServiceList.length; i++) {
                //循环获取child
                for (let j = 0; j < this.allServiceList[i].clildList; j++) {
                    //循环child对比id
                    let index = this.docServiceList.indexOf(
                        this.allServiceList[i].clildList[j].id
                    );
                    if (index != -1) {
                        this.allServiceList[i].clildList[j].selected = 1;
                        this.allServiceList[i].clildList[j].flag = true
                    } else {
                        this.allServiceList[i].clildList[j].selected = 0;
                        this.allServiceList[i].clildList[j].flag = false
                    }
                }
            }
            return this.allServiceList;
        }
    }
};
</script>

<style scoped lang="less">
.doctorservermanage {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .tit {
        text-align: center;
    }
    .addManag {
        display: flex;
        flex-direction: column;
        padding: 20px;
        .tt {
            font-size: 22px;
            font-weight: 700;
            line-height: 32px;
            width: 100%;
            .edit-btn {
                float: right;
            }
        }
        .fuwu {
            width: calc(100% - 100px);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid rgb(242, 242, 242);
            .xsfw {
                margin: 0;
                .select_wufu {
                    margin: 0 30px;
                    display: flex;
                    flex-direction: row;
                    padding: 0 20px;
                    align-items: center;
                    flex-wrap: wrap;
                    div {
                        width: 20%;
                        margin: 10px 20px;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        input {
                            outline: none;
                            border: none;
                        }
                    }
                }
            }
        }
        .expert_save {
            width: 200px;
            height: 50px;
            margin: 10px auto;
            .btn{
                margin: 0 auto;
                width: 75px;
                height: 35px;
            }
        }
    }
}
</style>